<div class="ssl-common-link-list">
  <div class="row">
    <div class="col-md-12">
      <ng-template *ngIf="!links; then tpl_loading; else tpl_loaded;"></ng-template>
    </div>
  </div>
  <ng-template #tpl_loading>
    <h5><span class="glyphicon glyphicon-repeat ssl-anim-rotate"></span> 加载中&hellip;</h5>
  </ng-template>
  <ng-template #tpl_loaded>
    <ng-template *ngIf="links.length; then tpl_hasData; else tpl_noData;"></ng-template>
    <ng-template #tpl_noData>
      <h5 class="text-warning"><span class="glyphicon glyphicon-info-sign"></span> 暂无匹配数据！</h5>
      <h5 class="text-warning"><span class="glyphicon glyphicon-info-sign"></span> 希望您能反馈链接建议，我们会定期筛选更新哦！</h5>
    </ng-template>
    <ng-template #tpl_hasData>
      <h5 class="text-success"><span class="glyphicon glyphicon-info-sign"></span> 共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条</h5>
      <div class="list-group">
        <div *ngFor="let obj of links" class="list-group-item" [class.ssl-link-active]="obj === activeLink" (click)="onLinkClick(obj);">
          <h4 class="list-group-item-heading">
            <img *ngIf="obj.iconUrl" [src]="obj.iconUrl" style="width: 22px; vertical-align: bottom;">
            <a tabindex="-1" href="javascript:;" class="title" [innerHTML]="obj.title | markToRed:keywords"></a>
            <div class="btn-group pull-right">
              <button tabindex="-1" class="btn btn-xs btn-default" [class.btn-danger]="obj.___tmp_isStar" (click)="starHandler($event, obj);"><i class="glyphicon glyphicon-star" [class.ssl-anim-rotate]="obj.__tmp_starProcessing"></i>{{obj.___tmp_isStar ? 'Unstar' : 'Star'}}</button>
              <button tabindex="-1" class="btn btn-xs btn-default disabled">{{obj.starUsers.length}}</button>
            </div>
            <br>
            <small><i class="glyphicon glyphicon-link"></i> <span class="href" [innerHTML]="obj.href | markToRed:keywords"></span></small>
          </h4>
          <p class="list-group-item-text" [innerHTML]="obj.summary | markToRed:keywords"></p>
        </div>
        <div *ngIf="hasMore" class="list-group-item text-center" (click)="onLoadMoreClick()">
          <a tabindex="-1" href="javascript:;"><span class="glyphicon" [ngClass]="{'glyphicon-indent-right': !loadMoreProcessing, 'glyphicon-repeat ssl-anim-rotate': loadMoreProcessing}"></span> 加载更多</a>
          <span class="text-success">（共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条）</span>
        </div>
        <div *ngIf="!hasMore" class="list-group-item text-center ssl-notHasMore">没有更多了 <span class="text-success">（共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条）</span></div>
      </div>
    </ng-template>
  </ng-template>
</div>
